<template>
  <view>
    <view class="wrap">
      <form>
        <view class="form-item">
          <view class="title">姓名</view>
          <input name="nickname" placeholder="请输入姓名" />
        </view>

        <view class="form-item">
          <view class="title">性别</view>
          <radio-group name="gender">
            <label>
              <radio value="男" /><text>男</text>
            </label>
            <label>
              <radio value="女" /><text>女</text>
            </label>
          </radio-group>
        </view>

        <view class="form-item">
          <view class="title">爱好</view>
          <checkbox-group name="loves">
            <label>
              <checkbox value="读书" /><text>读书</text>
            </label>
            <label>
              <checkbox value="写字" /><text>写字</text>
            </label>
          </checkbox-group>
        </view>

        <view class="form-item">
          <view class="title">开关</view>
          <view>
            <switch name="switch" />
          </view>
        </view>

        <view class="form-item">
          <view class="title">备注</view>
          <view class="uni-textarea">
            <textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
          </view>
        </view>

        <view class="form-item">
          <button form-type="submit">确定</button>
          <button type="default" form-type="reset">重置</button>
        </view>
      </form>
    </view>
  </view>
</template>

<script setup>

</script>

<style>
label {
  margin-right: 10rpx;
}
.form-item {
  display: flex;
  margin: 50rpx 0 50rpx 0;
}
.title {
  width: 120rpx;
}
.wrap {
  padding: 0 20rpx 0 20rpx;
}
</style>
